<template>
  <div style="padding: 10px">
    <!--    功能区域-->
    <div style="margin: 10px 0">




    </div>

    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable></el-table-column>
      <el-table-column prop="seatNumber" label="座位号"></el-table-column>
<!--      <el-table-column  prop="cleanstate"  label="打扫状态"></el-table-column>-->
<!--      <el-table-column  prop="seatState"  label="可用状态"></el-table-column>-->
      <el-table-column  prop="member"  label="可用餐人数"></el-table-column>




      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleChoose(scope.row.id,scope.row.seatNumber)"  type="primary">入座
          </el-button>
<!--          <span ><el-button @click="clean(scope.row.id)" style="margin-top: 5px" type="primary">保洁-->
<!--          </el-button></span>-->

<!--          <div style="margin-top: 6px">-->
<!--          <el-popconfirm title="请确保顾客完成用餐" @confirm="releaseSeat(scope.row.id)">-->
<!--            <template #reference>-->
<!--              <el-button type="danger"  >用餐完成</el-button>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
<!--          </div>-->

        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <div class="block">

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>



      </div>
    </div>

  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'Order',

  components: {},
  data() {
    return {


      seatlist:[],


      form: {},

      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [



      ]
    }
  },
  created(){
    this.load()
    this.$nextTick(() => {
      setInterval(this.load, 5000);
    });
},
  methods: {

    load(){
      request.get("/order/selectSeat",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search,
          seatState:"true",
          cleanstate:"打扫完成"}
      }).then(res =>{



        this.tableData = res.data.records
        this.total = res.data.total
      })





    },
    releaseSeat(id){
      request.put("/order/releaseSeat/" +id).then(res =>{


            if( res.code ==='0'){

              this.$messageBox({

                type:"success",
                message:"释放座位成功"
              })

            }else {
              this.$messageBox({

                type: "error",
                message: res.msg
              })
            }
      })
      this.load()



    },
    clean(id){
      request.put("/order/cleanSeat/" +id).then(res =>{
            if( res.code ==='0'){

              this.$messageBox({

                type:"success",
                message:"请求成功"
              })

            }else {
              this.$messageBox({

                type:"error",
                message:res.msg
              })
            }
          }

      )
      this.load()

    },

    handleChoose(id,seatNumber) {



      request.get("/order/" +id, {}).then(res1 =>{

        if(res1.data.seatState === 'false'){
          this.$message.error("座位正在使用")
          return
        }else if(res1.data.cleanstate!= '打扫完成'){
          this.$message.error("座位需要打扫")
          return

        }else {

          sessionStorage.setItem("seatNumber",JSON.stringify(seatNumber))//缓存座位号信息
          sessionStorage.setItem("seatid",JSON.stringify(id))

          this.$router.push("/goodsShow" )



        }



      })


    }, handleSizeChange( pageSize) { //改变页面显示信息个数
      this.pageSize = pageSize
      this.load()

    }, handleCurrentChange(pageNum) { //改变当前页
      this.currentPage = pageNum
      this.load()
    },


  }
}
</script>
